<template>
  <div class="book-detail-content flex items-end relative">
    <img :src="info.bookCover" alt="" class="absolute">
    <div class="book-content relative">
      <div class="right-content absolute">
        <span class="title txtover1 font-bold text-normal">
          {{ info.bookName }}
        </span>
        <span class="author txtover1 text-xs mt-2">
        {{ info.author }}
        </span>
        <span class="txtover1 text-xs mt-1">
          {{ info.classify }}
        </span>
      </div>
      <div v-show="info.honor" class="rank-class txtover1 px-2 absolute">
          <span>
          {{ info.honor }}
          </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  info: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
</script>

<style scoped lang="scss">
.book-detail-content {
  height: 178px;

  img {
    height: 162px;
    width: 112px;
    top: 4px;
    left: 16px;
    z-index: 999;
    border-radius: 10px;
  }

  .book-content {
    height: 126px;
    width: 100%;
    background-color: rgba(0, 0, 255, 0.05);
    border-radius: 8px;

    .right-content {
      left: 144px;
      top: 16px;
    }

    .rank-class {
      left: 144px;
      bottom: 12px;
      background: linear-gradient(119.89deg, rgba(255, 211, 66, 1) 0%, rgba(255, 225, 128, 1) 100%);
      border-radius: 40px;

      span {
        font-size: 10px;
        color: rgba(150, 98, 0, 1);
      }
    }
  }
}
</style>
